<template>
  <div class="breadcrumb-list">
    <span v-for="(item,index) in ['根目录', props.name]" :key="index"
      @click="crumbsChange(index)">{{ index ? ' / ' : ''}}{{ item }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  name: String
})

const emit = defineEmits(['back'])

const crumbsChange = (index) => {
  if (index) return
  
  emit('back')
}
</script>

<style scoped lang="scss">
.breadcrumb-list {
  color: #999;
  span {
    cursor: pointer;
    &:last-child {
      color: #333;
      cursor: unset;
    }
  }
}
</style>